<template>
<div><div class="lis-table row">
      <div class="table-left">
        <!-- <div class="left-search row">
          <div style="font-size: 14px; width: 100px">输入搜索：</div>
          <el-input
            v-model="inputKey"
            placeholder="劳务公司/班组/班组长名称"
            @change="search"
          ></el-input>
        </div> -->
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          style="margin-top:20px"
        ></el-tree>
      </div>
      <div class="table-right">
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection"  width="42" align="center"> </el-table-column>
          <el-table-column type="index" width="55" label="序号" align="center">
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="姓名"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="age"
            label="年龄"
          >
          <template slot-scope="scope">
            <div>{{scope.row.birthDate|birthToAge}}</div>
          </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="phone"
            label="电话"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="workTypeName"
            label="工种"
          >
          </el-table-column>
        </el-table>
        <div class="block-space"></div>
        <div class="list-block row">
          <div class="page-tag">
          共{{ Math.ceil(totalData / searchForm.pageSize) }}页/{{
            totalData
          }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchForm.currentPage"
          :page-size="searchForm.pageSize"
          layout="sizes,prev, pager, next, jumper"
          :total="totalData"
        >
        </el-pagination>
        </div>
      </div>
    </div>
    <div
      class="main-title row"
      style="background-color: #ffffff; border-top: solid 1px #e4e4e4"
    >
      <div style="width: 100%; text-align: right; margin-right: 20px">
        <el-button class="sub-btn" type="info" @click="cancle">取消</el-button>
        <el-button class="sub-btn color-1abc9c" @click="next">下一步</el-button>
      </div>
    </div>
    </div>
    
</template>

<script>
import {
  getTree,
  getPersonByTeamId,
  getPersonByserviceCorporationId,
} from "@/api/worker";
import { getAge} from "@/api/attendance.js";
import eventBus from '../eventBus'
export default {
  data() {
    return {
      searchForm: {
        currentPage: 1,
        pageSize: 10,
        // date: null,
        name: null,
        // status: null,
        team_id: null,
        service_corporation_id: null,
      },
      active: 0,
      buttonTag:'下一步',
      inputKey: "",
      treeData: [
        {
          label: "劳务公司1",
          children: [
            {
              label: "x班组",
              children: [
                {
                  label: "x班组1",
                },
                {
                  label: "x班组2",
                },
                {
                  label: "x班组3",
                },
              ],
            },
          ],
        },
        {
          label: "劳务公司2",
          children: [
            {
              label: "x班组",
              children: [
                {
                  label: "x班组1",
                },
              ],
            },
            {
              label: "xx班组",
              children: [
                {
                  label: "xx班组1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      tableData: [],
      flag: 1, //1--一级劳务公司，0--二级班组
      selectedList: [],
      // currentPage: 1,
      // totalPage:50,
      // pageSize: 10,
      totalData: 0,
      transfer:{
        corpId:null,
        corpName:null,
        teamId:null,
        teamName:null,
      },
    };
  },
  created() {
     this.getTreeData();
    // this.getTableData();
  },
  filters:{
    birthToAge(birth){
      return getAge(birth)
    }
  },
  methods: {
    cancle() {
      this.$router.go(-1);
    },
    next() {
      if (this.selectedList.length > 0) {
          this.$emit("getActive",1)
          eventBus.$emit('selectecList',this.selectedList)
          console.log('this.transfer',this.transfer);
          eventBus.$emit('transfer',this.transfer)
          } else {
          this.$message({
            type: "warning",
            message: "请选择人员",
          });
        }
    },
    // 获取劳务公司、班组树形数据
    getTreeData(){
      getTree().then(res=>{
        // console.log(res)
        this.treeData = res.data.data
      })
    },
    search() {
      console.log("搜索");
    },
    //发送请求获取表格数据
    getTableData() {
      if (this.flag === 0) {
        // 根据班组id查询班组人员————选择班组
        getPersonByTeamId(this.searchForm).then((res) => {
          // console.log(res);
          this.tableData = res.data.data.records;
          this.totalData = res.data.data.total;
          // this.processTableData();
        });
      } else {
        // 根据劳务公司id查询劳务公司人员————选择劳务公司
        getPersonByserviceCorporationId(this.searchForm).then((res) => {
          // console.log(res);
          this.tableData = res.data.data.records;
          this.totalData = res.data.data.total;
          // this.processTableData();
        });
      }
    },
    // 树状图
    handleNodeClick(res) {
      console.log(res)
      if (res.children == null) {
        // console.log("班组")
        this.transfer.teamId = res.id,
        this.transfer.teamName = res.name,
        this.flag = 0;
        this.searchForm.team_id = res.id;
        this.searchForm.service_corporation_id = null;
        this.getTableData();
      } else {
        // console.log("劳务公司")
        this.transfer.corpId = res.id,
        this.transfer.corpName = res.name,
        this.flag = 1;
        this.searchForm.service_corporation_id = res.id;
        this.searchForm.team_id = null;
        // this.getTableData();
      }
    },
    //   获取当前页数据
    getCPageData(data) {
      //   getPaymentList(data).then((res) => {
      // this.totalData = res.data.data.total;
      // console.log(res)
      // this.tableData = res.data.data.records;
      //   });
    },
    // 修改选择状态
    handleSelectionChange(res) {
      this.selectedList = res;
      this.$emit("selectPersonnel",res)
    },
    handleSizeChange(val){
      this.searchForm.pageSize = val
      this.getTableData();
    },
    //更改当前页
    handleCurrentChange(val) {
      this.searchForm.currentPage = val
      this.getTableData();
    },
  },
};
</script>

<style lang="scss" >
.row {
  display: flex;
  flex-direction: row;
}
.lis-table {
  width: 100%;
  background-color: #ffffff;
  .table-left {
    width: 40%;
    border-right: solid 1px #e4e4e4;
    .left-search {
      height: 50px;
      line-height: 50px;
      margin: 5px 15px;
    }
  }
  .table-right {
    width: 60%;
    position: relative;
    .block-space{
        width: 100%;
      height: 50px;
    }
    .list-block {
        position: absolute;
        bottom: 0;
      width: 100%;
      height: 50px;
      text-align: right;
      background-color: #ffffff;
      padding-top: 10px;
      //   border: solid 1px #e4e4e4;
      padding-right: 10px;
      justify-content: flex-end;
      .page-tag {
        font-size: 13px;
        line-height: 30px;
      }
    }
  }
}
</style>